<template>
  <div class="page-common-layout">
    <div class="page-common-content">
      <tool-bar
        @search="$refs.table.refresh(true)"
        @reset="
          () => {
            (this.queryParam = {}), $refs.table.refresh(true);
          }
        "
      >
        <template slot="toolForm">
          <a-form-item :label="$ct('workflowBelongingTo', '所属流程')">
            <a-input
              v-model="queryParam.modelName"
              :placeholder="$ct('workflowBelongingTo', '所属流程')"
            />
          </a-form-item>
        </template>
      </tool-bar>
      <DataGrid
        ref="table"
        :columns="columns"
        :url="url"
        rowKey="taskId"
        showPagination="auto"
        :queryParam="queryParam"
        :showRowSelect="false"
      >
        <span slot="renderAction" slot-scope="{ text, record }">
          <template>
            <a @click="handleTransaction(record)" v-action:doneProcess_detail>
              详情
            </a>
          </template>
        </span>
      </DataGrid>
      <!-- 流程详情 -->
      <task-form
        ref="taskModal"
        :visible="taskVisible"
        @cancel="taskHandleCancel()"
        @ok="taskHandleOk"
      />
    </div>
  </div>
</template>

<script>
import { dataGridMixin } from "@/mixins/dataGridMixin";
import { DataGrid } from "@/components";
import taskForm from "../myMission/taskView.vue";

const columns = [
  {
    title: "流程标题",
    dataIndex: "formName",
    langCode: "workflowTitle",
    width: 200,
  },
  {
    title: "所属流程",
    dataIndex: "modelName",
    langCode: "workflowBelongingTo",
  },
  {
    title: "发起时间",
    dataIndex: "startTime",
    langCode: "originatingTime",
  },
  {
    title: "发起人员",
    dataIndex: "userNameId",
    langCode: "originator",
  },
  {
    title: "审核环节",
    dataIndex: "taskName",
    langCode: "auditPhase",
  },
  {
    title: "审核时间",
    dataIndex: "endTime",
    langCode: "AuditTime",
    sorter: false,
    width: 200,
  },
  {
    title: "操作",
    dataIndex: "action",
    width: 80,
    align: "center",
    scopedSlots: {
      customRender: "renderAction",
    },
  },
];
export default {
  name: "TableList",
  mixins: [dataGridMixin],
  components: {
    DataGrid,
    taskForm,
  },
  data() {
    return {
      columns,
      visible: false,
      confirmLoading: false,
      mdl: null,
      queryParam: {},
      url: {
        getPageSet: "/workflow/apiFlowableTask/getApplyedTasks",
      },
      taskVisible: false,
    };
  },
  methods: {
    handleCancel() {
      this.visible = false;
    },
    // 获取流程详情
    handleTransaction(e) {
      this.confirmLoading = true;
      const jsonData = "";
      this.$post("/workflow/apiFlowableTask/historyClickDetails", {
        processInstanceId: e.processInstanceId,
        modelKey: e.modelKey,
        businessKey: e.businessKey,
        processDefinitionId: e.processDefinitionId,
        nodeId: e.nodeId,
      }).then((res) => {
        if (res.statusCode == 300) {
          this.$message.error(res.message, 1.5);
          return false;
        }
        this.taskVisible = true;
        const jsonData = res;
        // 获取已办数据未返回业务uuid
        jsonData.businessKey = e.businessKey;
        this.$refs.taskModal.loadData(e, jsonData);
        this.confirmLoading = false;
      });
    },
    taskHandleOk() {
      this.taskVisible = false;
    },
    taskHandleCancel() {
      this.taskVisible = false;
    },
  },
};
</script>

<style lang="less"></style>
